<!DOCTYPE html>
<html>
	<head>
		<meta name="referrer" content="no-referrer">
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>Options API 存在的问题</h2>
		<div>
			<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f84e4e2c02424d9a99862ade0a2e4114~tplv-k3u1fbpfcp-watermark.image"
				height="400" />
			<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e5ac7e20d1784887a826f6360768a368~tplv-k3u1fbpfcp-watermark.image"
				height="400" />
		</div>

		<h2>Composition API 的优势</h2>
		<div>
			<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc0be8211fc54b6c941c036791ba4efe~tplv-k3u1fbpfcp-watermark.image"
				height="360" />
			<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6cc55165c0e34069a75fe36f8712eb80~tplv-k3u1fbpfcp-watermark.image"
				height="360" />
		</div>
		
		<!-- 
		 
## 1.shallowReactive 与 shallowRef

- shallowReactive：只处理对象最外层属性的响应式（浅响应式）。
- shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。

- 什么时候使用?
  -  如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。
  -  如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。
			//不能修改  数组里面的1 2 3 5 8 9 8 只能修改整个数组
			let arr = shallowRef([1,2,3,5,8,9,8])
			arr.value = arr.value.filter(item=>item>3)
	例如 filter
## 2.readonly 与 shallowReadonly 
			能够对reactive  ref 对象进行重新包装
- readonly: 让一个响应式数据变为只读的（深只读）。
		data = readonly(data)
- shallowReadonly：让一个响应式数据变为只读的（浅只读）。
		data = shallowReadonly(data)
		
	为什么不直接 用对象  普通对象 数据其实改了   readonly 数据没有修改  
- 应用场景: 不希望数据被修改时。 其他组件传过来的   ref 数据

## 3.toRaw 与 markRaw

- toRaw：
  - 作用：将一个由```reactive```生成的响应式对象转为普通对象(不能是ref对象)。
  - 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。
- markRaw：
  - 作用：标记一个对象，使其永远不会再成为响应式对象。
  - 应用场景:
    1. 有些值不应被设置为响应式的，例如复杂的第三方类库等。
    2. 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。
	
	当新增的属性 会报错  就需要 将对象本身交出去

			let car = {name:'奔驰',price:40}
			person.car = markRaw(car)

     ```
## 4.响应式数据的判断

- isRef: 检查一个值是否为一个 ref 对象
- isReactive: 检查一个对象是否是由 `reactive` 创建的响应式代理
- isReadonly: 检查一个对象是否是由 `readonly` 创建的只读代理
- isProxy: 检查一个对象是否是由 `reactive` 或者 `readonly` 方法创建的代理	
	
	
	
## 5.customRef

- 作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。
- 实现防抖效果：
```vue
		<template>
			<input type="text" v-model="keyword">
			<h3>{{keyword}}</h3>
		</template>
		
		<script>
			import {ref,customRef} from 'vue'
			export default {
				name:'Demo',
				setup(){
					// let keyword = ref('hello') //使用Vue准备好的内置ref
					//自定义一个myRef
					function myRef(value,delay){
						let timer
						//通过customRef去实现自定义
						return customRef((track,trigger)=>{
							return{
								get(){
									track() //告诉Vue这个value值是需要被“追踪”的
									return value
								},
								set(newValue){
									clearTimeout(timer)
									timer = setTimeout(()=>{
										value = newValue
										trigger() //告诉Vue去更新界面
									},delay)
								}
							}
						})
					}
					let keyword = myRef('hello',500) //使用程序员自定义的ref
					return {
						keyword
					}
				}
			}
		</script>
		 



# 四、Composition API 的优势
## 1.Options API 存在的问题
使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改 。

	https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f84e4e2c02424d9a99862ade0a2e4114~tplv-k3u1fbpfcp-watermark.image
	https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e5ac7e20d1784887a826f6360768a368~tplv-k3u1fbpfcp-watermark.image
	
## 2.Composition API 的优势
我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。
	https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc0be8211fc54b6c941c036791ba4efe~tplv-k3u1fbpfcp-watermark.image
	https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6cc55165c0e34069a75fe36f8712eb80~tplv-k3u1fbpfcp-watermark.image






		 
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 
		 
	</body>
</html>
